{{extends file='admin/base.tpl'}}

{{block name='title'}}用户管理{{/block}}

{{block name='content'}}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1 class="h2 mb-4">用户管理</h1>
        </div>
    </div>
    
    <!-- 工具栏 -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="搜索用户...">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button">
                        <span data-feather="search"></span> 搜索
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-6 text-right">
            <button class="btn btn-success">
                <span data-feather="user-plus"></span> 添加用户
            </button>
        </div>
    </div>
    
    <!-- 数据表格 -->
    <div class="card">
        <div class="card-body">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th scope="col"><input type="checkbox"></th>
                        <th scope="col">ID</th>
                        <th scope="col">用户名</th>
                        <th scope="col">邮箱</th>
                        <th scope="col">角色</th>
                        <th scope="col">状态</th>
                        <th scope="col">创建时间</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>1</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="https://via.placeholder.com/40" class="rounded-circle mr-2">
                                <span>admin</span>
                            </div>
                        </td>
                        <td>admin@example.com</td>
                        <td><span class="badge badge-primary">管理员</span></td>
                        <td><span class="badge badge-success">启用</span></td>
                        <td>2023-01-01 10:00:00</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>2</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="https://via.placeholder.com/40" class="rounded-circle mr-2">
                                <span>user1</span>
                            </div>
                        </td>
                        <td>user1@example.com</td>
                        <td><span class="badge badge-secondary">普通用户</span></td>
                        <td><span class="badge badge-success">启用</span></td>
                        <td>2023-01-02 14:30:00</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>3</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="https://via.placeholder.com/40" class="rounded-circle mr-2">
                                <span>user2</span>
                            </div>
                        </td>
                        <td>user2@example.com</td>
                        <td><span class="badge badge-secondary">普通用户</span></td>
                        <td><span class="badge badge-danger">禁用</span></td>
                        <td>2023-01-03 09:15:00</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="card-footer">
            <div class="row">
                <div class="col-md-6 text-left">
                    <p>显示 1 到 3 条，共 12 条</p>
                </div>
                <div class="col-md-6">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-end">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
{{/block}}